<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      .box {
        height: 100px;
        width: 100px;
        background-color: red;
      }
    </style>
  </head>
  <body>
    <!-- 
      模板语法：通过特定的语法规则将 Vue 的组件数据渲染到 HTML 的一种语法。

        1. 文本插值   {{}}

        2. 渲染HTML   使用 v-html 来渲染带有标签的字符串

        3. Attribute 绑定   使用 v-bind 指令来绑定数据
          
          v-bind:xx属性=“数据”

        4. 使用 JavaScript 表达式

          {{ 表达式 }}

          v-bind:xxx="表达式"

          v-xxx="表达式"

          @click="表达式"

        5. 指令
          写在 元素开始标签上的，以  v- 开头的属性就叫做指令
          目前了解到的的指令有哪些：

            0. v-text
              类似与 {{ }} 语法
                当 Vue 渲染还未生效时，页面不会出现 {{ }} 特殊标记
              底层原理使用的是  innerText

            1. v-html
              底层原理使用的是  innerHTML
            2. v-for
            3. v-bind
                完整写法：
                  v-bind:xx属性="表达式"
                
                简写写法：
                  :xx属性="表达式"
            4. v-on
                完整写法：
                  v-on:事件="事件处理函数"

                简写写法：
                  @事件="事件处理函数"

     -->

    <div id="app">
      <h1>{{ msg }}</h1>

      <h1 v-text="msg"></h1>

      <div>{{ html }}</div>

      <hr />

      <div v-html="html"></div>

      <hr />
      <div :title="title" class="box"></div>
      <button v-on:click="fn1">修改 title</button>

      <hr />
      <div v-bind:class="box"></div>

      <hr />
      <button v-bind:disabled="isDisabled">点我</button>

      <hr />
      <input v-bind:type="inputType" value="hello" />
      <button @click="toggle">
        {{ inputType === 'text' ? '闭眼' : '开眼' }}
      </button>
    </div>

    <script src="../lib/vue-3.js"></script>

    <script>
      const { createApp } = Vue;

      const app = createApp({
        data() {
          return {
            msg: "Hello Vue3",
            html: "<button>按钮</button>",
            title: "张三",
            box: "box",
            isDisabled: false,
            inputType: "text",
          };
        },

        methods: {
          fn1() {
            this.title = "里斯";
          },

          toggle() {
            if (this.inputType === "text") {
              this.inputType = "password";
            } else {
              this.inputType = "text";
            }
          },
        },
      });

      // setTimeout(() => {
      app.mount("#app");
      // }, 1000);
    </script>
  </body>
</html>
